<!DOCTYPE html>
<html>
<head>
	<title>canvas</title>
</head>
<body>
	<canvas width="600px;" height="600px" id="canvas" style="border: 2px solid #F00"></canvas>
	<script type="text/javascript">

		var canvas = document.getElementById('canvas');
		var etc    = canvas.getContext('2d');

		var width  = etc.canvas.width;
		var height = etc.canvas.height;
		var r      = width / 2;

		var num    = [15,16,17,18,19,20,21,22,23,24,13,14];		
		//1、画圆
		function drawArc()
		{
			etc.save();
			//重新映射画布上的（0 ， 0 ）点
			etc.translate(r , r);
			etc.lineWidth = 20;
			//etc.strokeStyle = 'yellow';
			//画圆方法
			etc.arc(0 , 0 , r - 10 , 0 , 2*Math.PI);
			etc.stroke();

			etc.save();
			//2、循环 表盘刻度
			for (var i = 0 ; i < 60 ; i ++) {
				//保存当前环境的状态
				etc.save();
				//起始一条路径或者重置当前的路径
				etc.beginPath();
				
				etc.rotate(i*6*Math.PI / 180); //error 少了除以180  导致不能实现

				if (i % 5 == 0) {
					etc.lineWidth   = 6;
					etc.strokeStyle = 'red';
				} else {
					etc.lineWidth   = 3;
					etc.strokeStyle = '#0000ff';
				}

				etc.moveTo(0 , -r + 20);
				etc.lineTo(0 , -r + 5);

				etc.stroke();
				//返回之前保存过的路径状态和属性
				etc.restore();
			}
			//3、绘制表盘上的数字
			for (var i = 0 ; i < num.length ; i++ ) {
				//b保存当前的状态
				etc.save();
				etc.beginPath();

				var x = Math.cos(30*Math.PI/180 * i) * (r - 50); //接近1
				var y = Math.sin(30*Math.PI/180 * i) * (r - 50); //接近0

				etc.textAlign    = 'center';
				etc.textBaseline = 'middle';
				etc.font         = '50px  Arial';

				etc.fillText(num[i] , x , y);
				//返回之前保存过得路径状态和属性
				etc.restore();
			}


			etc.restore(); 	
		}
		

		//4、绘制表盘指针

		//小时
		function drawHour(hour)
		{   
			//保存当前环境状态
			etc.save();
			etc.beginPath();

			etc.lineWidth   = 10;
			etc.rotate(30 * hour * Math.PI / 180);
			etc.moveTo(0 , -r + 200);
			etc.lineTo(0 , 0);
			
			etc.strokeStyle = 'pink';
			
			etc.stroke();
			//返回之前保存过得路径状态和属性
			etc.restore();
		}

		//分钟
		function drawMinute(minute) {
			etc.save();
			etc.beginPath();

			etc.lineWidth   = 10;
			etc.rotate(6 * minute * Math.PI / 180);

			etc.moveTo(0 , -r + 150);
			etc.lineTo(0 , 0);
			
			etc.strokeStyle = 'pink';
			//绘制已定义的路径
			etc.stroke();
			etc.restore();
		}
		
		//秒钟
		function drawSecond(second) {
			etc.save();
			etc.beginPath();
			
			etc.lineWidth   = 10;
			etc.rotate(6 * second * Math.PI / 180);

			etc.moveTo(0 , -r + 120);
			etc.lineTo(0 , 0);
			etc.strokeStyle = 'pink';
			//绘制已定义的路径
			etc.stroke();
			etc.restore();
		}
		
		//5、定时器 动起来
		function draw(w, h)
		{
			// etc.save();
			etc.clearRect(0 , 0 , w , h);
			//调用画圆方法
			
			var time   = new Date();
			var hour   = time.getHours();
			var minute = time.getMinutes();
			var second = time.getSeconds();

			drawArc();

			drawHour(hour);
			drawMinute(minute);
			drawSecond(second);

			
			etc.restore();
		}

		setInterval(function(){
			draw(width,height);
		},1000);



	</script>
</body>
</html>